<template>
	<div>
		<div class="mui-input-row">
			<label>评论</label><br />
			<textarea v-model="pinlun.desc" rows="3" cols="20" placeholder="请输入内容" style="border: 1px solid rgb(238, 238, 238);width: calc(100% - 10px);margin: 5px;float: none;"></textarea>
		</div>
		<div class="mui-button-row" style="height: 50px;">
			<button class="mui-btn mui-btn-primary mui-pull-right" style="margin-right: 5px;" type="button" onclick="return false;" @click="addPinglun()">确认</button>
		</div>

		<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
			<li class="mui-table-view-cell" v-for="(item, index) in pingluns" :key="index">
				<div class="mui-table">
					<div class="mui-table-cell mui-col-xs-10">
						<h4 class="mui-ellipsis">{{item.title}}</h4>
						<h5>{{item.author}}</h5>
						<p class="mui-h6 mui-ellipsis">{{item.desc}}</p>
					</div>
					<div class="mui-table-cell mui-col-xs-2 mui-text-right">
						<span class="mui-h5">12:25</span>
					</div>
				</div>
			</li>
		</ul>
		<p style="text-align: center;" @click="loadFirst(pageNo)">加载更多</p>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				pingluns: [],
				pinlun:{
					title:'1',
					author:'2',
					desc:''
				},
				pageNo : 2
			};
		},
		methods: {
			addPinglun(){
				this.pingluns.splice(0, 0, this.pinlun);
				this.pinlun = {
					title:'1',
					author:'2',
					desc:''
				};
			},
			loadFirst(pageNo) {
				for(var i = 0; i < 10; i++) {
					var item = {
						title: '信息化推进办公室张彦合同付款信息化',
						author: '申请人：李四',
						desc: 'Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿'
					};
					this.pingluns.push(item);
				}
			}
		},
		created() {
			this.loadFirst(null);
		}
	}
</script>

<style scoped="scoped">
	ul li {
		width: 100%;
	}
</style>